<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Media Element</title>
<script type="text/javascript">
	var mediaCtrl = {
			failed: function(e) {
				switch (e.target.error.code) {
					case e.target.error.MEDIA_ERR_ABORTED:
						alert('비디오 재생이 중단되었습니다.');
						break;
					case e.target.error.MEDIA_ERR_NETWORK:
						alert('네트워크 오류로 비디오 다운로드에 문제가 발생했습니다.');
						break;
					case e.target.error.MEDIA_ERR_DECODE:
						alert('동영상 파일에 문제가 있거나 브라우저에서 지원하지 않는 영상입니다.');
						break;
					case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
						alert('서버의 응답 혹은 네트워크상태가 좋지 않거나 포맷이 지원되지 않기 때문에 동영상을 로드할 수 없습니다.');
						break;
					default:
						alert('알 수없는 오류가 발생했습니다.');
					break;
				}
			}
	}
	
	function viewCurrentTime() {
		var elVideo = document.getElementById('videoElement');
		document.getElementById('timeInput').value = elVideo.currentTime;
		
		var statusHTML = [];
		var attributes = elVideo.attributes;

		statusHTML.push('buffered: ', elVideo.buffered, '<br />');
		statusHTML.push('currentSrc: ', elVideo.currentSrc, '<br />');
		statusHTML.push('currentTime: ', elVideo.currentTime, '<br />');
		statusHTML.push('defaultPlaybackRate: ', elVideo.defaultPlaybackRate, '<br />');
		statusHTML.push('duration: ', elVideo.duration, '<br />');
		statusHTML.push('ended: ', elVideo.ended, '<br />');
		statusHTML.push('initialTime: ', elVideo.initialTime, '<br />');
		statusHTML.push('loop: ', elVideo.loop, '<br />');
		statusHTML.push('muted: ', elVideo.muted, '<br />');
		statusHTML.push('networkState: ', elVideo.networkState, '<br />');
		statusHTML.push('paused: ', elVideo.paused, '<br />');
		statusHTML.push('playbackRate: ', elVideo.playbackRate, '<br />');
		statusHTML.push('played: ', elVideo.played, '<br />');
		statusHTML.push('preload: ', elVideo.preload, '<br />');
		statusHTML.push('readyState: ', elVideo.readyState, '<br />');
		statusHTML.push('seekable: ', elVideo.seekable, '<br />');
		statusHTML.push('src: ', elVideo.src, '<br />');
		statusHTML.push('startOffsetTime: ', elVideo.startOffsetTime, '<br />');
		statusHTML.push('tracks: ', elVideo.tracks, '<br />');
		statusHTML.push('videoHeight: ', elVideo.videoHeight, '<br />');
		statusHTML.push('videoWidth: ', elVideo.videoWidth, '<br />');
		statusHTML.push('volume: ', elVideo.volume, '<br />');
		
		document.getElementById('videoStatusContainer').innerHTML = statusHTML.join('');
	}
</script>
</head>
<body>
	<div style="float: left;">
		<h1>미디어 태그 활용하기</h1>
		<video id="videoElement" controls="controls" ontimeupdate="viewCurrentTime();" onerror="mediaCtrl.failed(event);">
			<source src="http://www.w3schools.com/html5/mov_bbb.mp4" type="video/mp4"></source>
			<source src="http://www.w3schools.com/html5/mov_bbb.ogg" type="video/ogg"></source>
		</video>
		<br />
		
		현재 위치: <input id="timeInput" /><br />
		현재 상태: <input id="statusInput" />
	</div>
	<div id="videoStatusContainer" style="float: left;"></div>
</body>
</html>
